<template>
    <div class="tools">
        <div class="tools-emoji" v-if="toolIndex === 0" ref="toolRef">
            <Picker
                :data="emojiIndex"
                :emojiSize="18"
                @select="handleSelectEmoji"
                class="emoji-picker"
            />
        </div>
        <i :class="['EachApp', item.icon]" v-for="item in toolList" :key="item.value" :style="{ 'font-size': item.size + 'px' }" @click="handleClickTools(item)"></i>
    </div>
</template>
<script lang="ts" setup>
const props = defineProps({
    refs: { type: Object, default: () => { return {} } }
})
import data from 'emoji-mart-vue-fast/data/all.json'
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
import { createElementImg } from "@/utils/index";
const imageSrc = ref('');
const emit = defineEmits(['toolsEmit']);
const toolRef = ref(null);
const toolIndex = ref(-1);
const toolList = ref([
    { value: 0, size: '20', icon: 'EachApp_biaoqing', label: '表情' },
    // { value: 1, size: '18', icon: 'EachApp_jietu', label: '截图' },
])
const emojiIndex = new EmojiIndex(data);
// console.log('emojiIndex===', data);

onMounted(() => {
    document.addEventListener('click', handleClickOutside);
})
onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside);
})

// 点击工具包
const handleClickTools = (row) => {
    const { value } = row;
    if(value === 0){ // 表情
        toolIndex.value = value;
    }
}

// 功能区--页面截图
const getCutValue = (e) => {
    emit('getCutImg', e);
    createElementImg(e, textarea.value);
};

// 选择表情
const handleSelectEmoji = (emoji) => {
    // console.log('emoji===', {...emoji});
    toolIndex.value = null;
    emit('toolsEmit', { toolsType: 'emoji', values: emoji.native });
}

// 点击工具包以外的区域，则表情包自动消失
const handleClickOutside = (event) => {
    if (toolRef.value && !toolRef.value.contains(event.target)) {
        if(!event.target?.className?.includes('EachApp')){
            toolIndex.value = null;
        }
    }
}
</script>
<style lang="scss" scoped>
.tools{
    height: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    position: relative;
    i{
        cursor: pointer;
        color: #888;
        &:not(:last-child){
            margin-right: 15px;
        }
    }
    &-emoji{
        position: absolute;
        bottom: 32px;
        z-index: 99;
        width: 400px;
        display: flex;
        box-shadow: 0 2px 4px rgba(0,0,0,0.12),0 0 6px rgba(0,0,0,0.04);
        img{
            margin: 5px;
        }
    }
    :deep(.v3-emoji-picker){
        width: 100%;
        .v3-body{
            padding: 5px 0 5px 5px;
            &-inner{
                scrollbar-color: initial;
                scrollbar-width: initial;
                padding-right: 0;
            }
            h5{
                display: none;
            }
            .v3-emojis{
                button{
                    max-width: 32px !important;
                }
            }
        }
        .v3-footer{
            display: none;
        }
    }
    :deep(.emoji-picker){
        border: none;
        width: 100% !important;
        .emoji-mart-search,
        .emoji-mart-bar,
        .emoji-mart-category-label{
            display: none;
        }
        #emoji-mart-list{
            .emoji-mart-category{
                &:first-child{
                    display: none;
                }
            }
        }
        .emoji-mart-emoji{
            span{
                width: 22px !important;
                height: 22px !important;
            }
        }
    }
}
</style>